<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="上级菜单" prop="parentId">
                        <treeselect
                            v-model="form.parentId"
                            :options="menuOptions"
                            :normalizer="normalizer"
                            :show-count="true"
                            placeholder="选择上级菜单"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio label="M">目录</el-radio>
                            <el-radio label="C">菜单</el-radio>
                            <el-radio label="F">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType !=='F'">
                    <el-form-item label="路由唯一键" prop="menuKey">
                        <el-input v-model="form.menuKey" placeholder="请输入动态菜单唯一键" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType!='M'">
                    <el-form-item label="权限标识" prop="perms">
                        <el-input v-model="form.perms" placeholder="权限标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType!=='F'">
                    <el-form-item label="组件" prop="component">
                        <el-input v-model="form.component" placeholder="组件" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item v-if="form.menuType != 'F'" label="菜单图标" prop="icon">
                        <i class="el-icon-circle-close close-wrap" @click="form.icon = '#'"></i>
                        <el-popover
                            placement="bottom-start"
                            width="460"
                            trigger="click"
                            @show="$refs['iconSelect'].reset()"
                        >
                            <icon-select ref="iconSelect" @selected="selectedicon"></icon-select>
                            <el-input
                                slot="reference"
                                v-model="form.icon"
                                placeholder="点击选择图标"
                                readonly
                            >
                                <i v-if="form.icon" slot="prefix" :class="'el-icon-' +form.icon" />
                                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                            </el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType==='C'">
                    <el-form-item label="打开方式" prop="target">
                        <el-select v-model="form.target" placeholder="请选择">
                            <el-option label="当前窗口" value></el-option>
                            <el-option label="新窗口" value="_blank"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType==='C'">
                    <el-form-item label="链接地址" prop="path">
                        <el-input v-model="form.path" placeholder="路径" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType !== 'F'">
                    <el-form-item label="重定向地址" prop="redirect">
                        <el-input v-model="form.redirect" placeholder="重定向地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType !== 'F'">
                    <el-form-item label="隐藏子菜单" prop="hiddenChildren">
                        <el-switch
                            v-model="form.hiddenChildren"
                        ></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.menuType !=='F'">
                    <el-form-item label="隐藏头部信息" prop="hiddenHeader">
                        <el-switch
                            v-model="form.hiddenHeader"
                        ></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number
                            v-model="form.orderNum"
                            controls-position="right"
                            :min="0"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="状态" prop="visible">
                        <el-select v-model="form.visible">
                            <el-option label="显示" value="0"></el-option>
                            <el-option label="隐藏" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm('form')"
                :disabled="loading"
                :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                size="mini"
            >确 定</el-button>
            <el-button @click="cancel" size="mini">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listMenu, savePerm } from "@/api/system";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import iconSelect from "@/components/IconSelect";
const ERR_OK = 200;
export default {
    components: {
        Treeselect,
        iconSelect
    },
    data() {
        return {
            // 表单参数
            form: {},
            title: "",
            open: false,
            rules: {
                parentId: [
                    {
                        required: true,
                        message: "请选择上级菜单",
                        trigger: ["blur", "change"]
                    }
                ],
                menuType: [
                    {
                        required: true,
                        message: "请选择类型",
                        trigger: "change"
                    }
                ],
                menuName: [
                    {
                        required: true,
                        message: "请输入权限名称",
                        trigger: "blur"
                    }
                ],
                menuKey: [
                    {
                        required: true,
                        message: "请输入动态菜单唯一键",
                        trigger: "blur"
                    }
                ],
                // perms: [
                //     {
                //         required: true,
                //         message: "请输入权限标识",
                //         trigger: "blur"
                //     }
                // ],
                // component: [
                //     {
                //         required: true,
                //         message: "请输入组件",
                //         trigger: "blur"
                //     }
                // ],
                // icon: [
                //     {
                //         required: true,
                //         message: "请选择图标",
                //         trigger: ["blur", "change"]
                //     }
                // ],
                // path: [
                //     {
                //         required: true,
                //         message: "请输入正确的路径",
                //         trigger: "blur"
                //     }
                // ],
                // redirect: [
                //     {
                //         required: true,
                //         message: "请输入重定向地址",
                //         trigger: "blur"
                //     }
                // ]
            },
            menuOptions: [],
            visibleOptions: [],
            statusOptions: [],
            loading: false
        };
    },
    methods: {
        /** 查询菜单下拉树结构 */
        getTreeselect() {
            listMenu().then(response => {
                this.menuOptions = [];
                const menu = { menuId: 0, menuName: "主类目", children: [] };
                menu.children = this.handleTree(response.data.rows, "menuId");
                this.menuOptions.push(menu);
            });
        },
        add(item) {
            this.reset();
            this.getTreeselect();
            if (item != null) {
                this.form.parentId = item.menuId;
            }
            this.open = true;
            this.title = "添加菜单";
        },
        edit(item) {
            this.reset();
            this.getTreeselect();
            if (item != null) {
                this.form = item;
            }
            this.open = true;
            this.title = "编辑菜单";
        },
        // 表单重置
        reset() {
            this.form = {
                menuId: "",
                parentId: 0,
                menuName: "",
                icon: "",
                menuType: "M",
                orderNum: 0,
                target: "",
                visible: "0",
                status: "0"
            };
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.menuId,
                label: node.menuName,
                children: node.children
            };
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    savePerm(this.form).then(res => {
                        this.loading = false;
                        if (res.data.code === ERR_OK) {
                            this.$message.success(res.data.msg);
                            this.$emit("ok");
                            this.open = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        cancel() {
            this.open = false;
        },
        //图标选择
        selectedicon(name) {
            this.form.icon = name;
        }
    }
};
</script>
<style lang="stylus" scoped>
.close-wrap{
    position: absolute;
    z-index: 9;
    right: 10px;
    top: 13px;
    cursor pointer
}
</style>